import { PureComponent } from 'react'

class Counter extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      value: props.initValue
    }
  }

  decrease = () => {
    const { step, onChange } = this.props
    let { value } = this.state
    value -= step
    this.setState({ value })
    onChange(value)
  }

  increase = () => {
    const { step, onChange } = this.props
    let { value } = this.state
    value += step
    this.setState({ value })
    onChange(value)
  }

  onChange = val => {
    console.log('xxxx', val)
  }

  render() {
    const { value } = this.state
    return (
      <div className="counter">
        <button type="button" onClick={() => { this.decrease() }}>-</button>
        <input type="number" value={value} onChange={() => {}} />
        <button type="button" onClick={() => { this.increase() }}>+</button>
      </div>
    )
  }
}

Counter.defaultProps = {
  value: 0,
  step: 1,
  onChange: () => {}
}


Counter.propTypes = {
}

export default Counter
